<template>
  <div id="map" ref="mapContainer" />
</template>

<script lang="ts" setup>
import { ref } from "vue";
import L from "leaflet";
import { onMounted, onBeforeUnmount } from "vue";
import { TileProvider, useMap } from "@/hooks/useMap";
// @ts-ignore
import { antPath } from "leaflet-ant-path";
const mapContainer = ref();
// 使用地图hooks
const { map, initMap, setView, loadTileLayer } = useMap(mapContainer, {
  tileType: "gaode",
  tileOptions: { type: "vector", layerOptions: {} }
});
// / 模拟路径数据 - 北京二环部分路段示例
const route = ref([
  [39.929986, 116.387985], // 西直门
  [39.92248, 116.397245], // 积水潭
  [39.922702, 116.410783], // 安定门
  [39.929583, 116.426645], // 东直门
  [39.937143, 116.438713], // 朝阳门
  [39.93991, 116.454273], // 建国门
  [39.929212, 116.467175], // 东便门
  [39.91569, 116.46872], // 崇文门
  [39.904978, 116.459236], // 前门
  [39.90537, 116.436455], // 和平门
  [39.913422, 116.42321], // 宣武门
  [39.922702, 116.414287] // 复兴门
]);

onMounted(async () => {
  await initMap();
  const path = antPath(route.value, {
    delay: 400,
    dashArray: [10, 20],
    weight: 5,
    color: "#0000FF",
    pulseColor: "#FFFFFF",
    paused: false,
    reverse: false,
    hardwareAccelerated: true
  });

  map.value.addLayer(path);
  map.value.fitBounds(path.getBounds());
});

// 销毁地图
onBeforeUnmount(() => {
  if (map) {
    map.value.remove();
    map.value = null;
  }
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
  height: 650px;
  color: #3a3a3a;
}
</style>
